import React, { Component } from 'react'
import style from './Musicalpage.module.less'
import demo from '../../assets/image/demo.jpg'
import { withRouter } from 'react-router-dom'
import {AllMusicPuRequest} from "@requests/Music";
import Loading from "@utils/Loading";
// import MusicScore from './components/MusicScore'

class Musicalpage extends Component {
    state = {
        music: [
            {
                id: 1,
                name: '千本樱',
                author: '初音未来',
                brief: '虚拟歌姬的一首反战歌曲',
                date: '2013-05-14'
            },
            {
                id: 2,
                name: 'you and me',
                author: '松井佑贵',
                brief: '日本著名吉他指弹大师的曲子',
                date: '2017-04-23'
            },
            {
                id: 3,
                name: '无题',
                author: '陈亮',
                brief: '中国著名吉他指弹大师的曲子',
                date: '2016-04-23'
            },
            {
                id: 4,
                name: '鲸歌',
                author: '陈亮&宋一凡',
                brief: '中国著名吉他指弹大师的双人合作，改编自萨满乐队的《鲸歌》',
                date: '2017-04-23'
            }
        ],
        data:null,
    }
    componentDidMount () {
        this.getMusicPu()
    }

    getMusicPu = async () => {
        const response = await AllMusicPuRequest()
        // if(response.code === 200){
            // console.log(response.result)
       const data = response.result.slice(0,4)
        console.log(data)
            this.setState({
                data:data
            })
        // }
    }
    ClickHidden = (id) => {
        // let id = event.target.id
        this.props.history.push(`/Musical/MusicScore/${id}`, id)
    }
    goPage = (event) => {
        let name = event.target.innerHTML
        this.props.history.push(`/Musical/AllMusical/${name}`)
    }
    render() {
        // console.log(this.state.data,'data')

        if(this.state.data === null){
            return (
                <>
                    <div>
                        <div className='center'>
                            <div className={style.box}>
                                <div className={style.right_box}>
                                    <div className={style.music_box}>
                                        <p className={style.p}  onClick={this.goPage}>guitar</p>
                                        <Loading />
                                    </div>
                                    <div className={style.music_box}>
                                        <p className={style.p}>piano</p>
                                        <Loading />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </>
            )
        }
        // console.log(this.state.data)
        return (
            <>
                <div>
                    <div className='center'>
                        <div className={style.box}>
                            <div className={style.right_box}>
                                <div className={style.music_box}>
                                    <p className={style.p}  onClick={this.goPage}>guitar</p>
                                    <ul>
                                        {this.state.data.map((item, index) => {
                                            console.log(item)
                                            // let music = item.fields
                                            return (<li key={item.id} onClick={(event) => this.ClickHidden(item.id)}>
                                                <div id={item.id} style={{ backgroundImage: `url(${process.env.REACT_APP_BASE_URL}${item.file_img})`, width: '100%', height: '100%', backgroundSize: 'cover' }}></div>
                                                <div className={style.text}>
                                                    <h1>标题:《{item.title}》</h1>
                                                    <p className={style.author}>作者：{item.author}</p>
                                                    <p className={style.brief}>曲谱简介：{item.brief}</p>
                                                    <p className={style.date}>{item.create_date}</p>
                                                </div>
                                            </li>)
                                        })}
                                    </ul>
                                </div>
                                <div className={style.music_box}>
                                    <p className={style.p}>piano</p>
                                    <ul>
                                        {this.state.music.map((item, index) => {
                                            return (<li key={item.id} onClick={(event) => this.ClickHidden(event)}>
                                                <div id={item.id} style={{ backgroundImage: `url(${demo})`, width: '100%', height: '100%', backgroundSize: 'cover' }}></div>
                                                <div className={style.text}>
                                                    <h1>标题:《{item.name}》</h1>
                                                    <p className={style.author}>作者：{item.author}</p>
                                                    <p className={style.brief}>曲谱简介：{item.brief}</p>
                                                    <p className={style.date}>{item.date}</p>
                                                </div>
                                            </li>)
                                        })}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </>
        )
    }
}
export default withRouter(Musicalpage)